<template>
	<view>
		<cu-custom bgColor="bg-theme text-white" :isBack="true" >
			<block slot="content">支付结果</block>
		</cu-custom>
		<view class="app-header">
			<div class="background-gradient"></div>
			
			<view class="contentBox padding">
				<view class="top text-center text-white">
					<text class="cuIcon-roundcheckfill"></text>
					<text class="text-bold padding-left-xs">支付成功</text>
				</view>
				<view class="padding-sm bg-white light radius-xl margin-top-lg">
					<view class="crow padding-lr-xs">
						<view class="title">订单编号</view>
						<view class="value">
							{{info.trade}}
						</view>
					</view>
					<view class="crow padding-lr-xs">
						<view class="title">支付时间</view>
						<view class="value">
							{{info.pay_time}}
						</view>
					</view>
					<view class="crow padding-lr-xs">
						<view class="title">支付方式</view>
						<view class="content payType" v-if="info.pay_type==='money'">
							<image src="@/static/image/order/balance.png" mode="" class="payTypeImg"></image>
							<text class="text-bold">余额支付</text>
						</view>
						<view class="content payType" v-else-if="info.pay_type==='wxpay'">
							<image src="@/static/image/order/wepay.png" mode="" class="payTypeImg"></image>
							<text class="text-bold">微信支付</text>
						</view>
						<view class="content payType" v-else-if="info.pay_type==='alipay'">
							<image src="@/static/image/order/wepay.png" mode="" class="payTypeImg"></image>
							<text class="text-bold">支付宝</text>
						</view>
						<view class="content payType" v-else-if="info.pay_type==='epay'">
							<image src="@/static/image/order/wepay.png" mode="" class="payTypeImg"></image>
							<text class="text-bold">易支付</text>
						</view>
					</view>
					<view class="crow padding-lr-xs" v-if="info.coupon_money>0">
						<view class="title">优惠金额</view>
						<view class="value payType">
							<text class="text-bold text-red">-￥{{info.coupon_money}}</text>
						</view>
					</view>
					<view class="crow padding-lr-xs">
						<view class="title">实际支付</view>
						<view class="value payType">
							<text class="text-bold text-red">￥{{info.price}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="button text-center margin-top">
				<button class="cu-btn china-btn-bg round" @click="toDetail()">
					<text class="padding-lr">我的订单</text>
				</button>
				<view class="padding-top-sm themeColor text-sm" @click="goHome()">
					<text>返回首页</text>
					<text class="cuIcon-right"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:{}
			};
		},
		onLoad(options) {
			this.getOrderInfo(options.trade)
		},
		methods:{
			getOrderInfo(trade){
				this.$utils.$api.Orders.info(trade).then(data=>{
					this.info=data;
				}).catch(err=>{
					uni.showModal({
						title: '提示',
						content: err.msg,
						showCancel: false,
						success: () => {
						this.$utils.$page.back();
						}
					})
				})
			},
			toDetail(){
				uni.switchTab({
					url:'/pages/order/list'
				})
			},
			goHome(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
.app-header {
	position: relative;
	.background-gradient {
		background: var(--theme-bg-color); /* 渐变效果的颜色 */
		width: 100%;
		height: 330upx; /* 背景高度可根据需要进行调整 */
		border-bottom-left-radius: 50% 50upx; /* 底部圆弧效果，可根据需求进行调整 */
		border-bottom-right-radius: 50% 50upx; /* 底部圆弧效果，可根据需求进行调整 */
	}
	.top{
		padding-top: 80upx;
		font-size: 40upx;
	}
}
.contentBox{
	margin-top: -350upx;
}
.crow{
	justify-content: space-between;
	line-height: 75upx;
}
.payType{
	display: flex;
	align-items: center;
	.payTypeImg{
		width: 40upx;
		height: 40upx;
	}
}
</style>
